<template>
  <div>
    <div class="footer-top">
      <span>选择星网 合作共赢</span>
      <!-- <el-button class="footer-button" type="primary">了解更多</el-button> -->
    </div>
    <div class="footer-center">
      <div class="section-title">
        <span>关于我们</span>
      </div>
      <div class="section-content">
        <div class="section-content-pc"></div>
        <div class="section-content-mobile">
          <span> 北京回泰科技服务有限公司成立于2015年8月</span>
          <span
            >是专门从事外贸进出口数据查询和提供数据分析及商业决策的国际经贸类大数据平台</span
          >
          <br />

          <span
            >我司拥有独立数据库及软件产品。贸易统计数据涵盖全球范围内10亿+国际贸易相关的数据信息</span
          >
          <span>包含300多个国家和国际组织数据</span>
          <span>HS海关代码8000多种货物商品贸易统计数据</span>
          <br />
          <span
            >由多领域资深数据专家组成的分析团队为政府、高校、研究机构提供精准数据及分析支持。</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.footer-top {
    gap: 20px;
    height: 224px;
    width: 100%;
    background-size: cover;
    background-image: url("../../assets/xwimg/about.png");
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    span {
      color: #004d7d;
      font-weight: 500;
      font-size: 48px;
      line-height: 100%;
      letter-spacing: 0%;
      text-align: center;
      margin-bottom: 20px;
    }

    .footer-button {
      background-color: #0080d1;
      width: 124px;
      height: 40px;
    }
  }
  .footer-center {
    height: 642px;
    text-align: center;

    .section-title {
      position: relative;
      display: inline-block;
      font-size: 24px;
      color: #333;
      text-align: center;
      margin: 60px auto;
    }

    .section-title::before {
      content: "ABOUT US";
      position: absolute;
      top: -25px; /* 根据需要往上推 */
      left: 50%;
      transform: translateX(-50%);
      font-size: 50px;
      color: rgba(0, 0, 0, 0.1);
      white-space: nowrap;
      font-weight: 800;
    }

    .section-title::after {
      content: "";
      display: block;
      width: 60px;
      height: 3px;
      background-color: #0080d1;
      margin: 8px auto 0;
    }

    .section-content {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 400px;

      .section-content-pc {
        margin-left: 90px;
        flex: 0 0 30%;
        height: 100%;
        border-radius: 20px;
        background-image: url("../../assets/xwimg/working.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }

      .section-content-mobile {
        flex: 0 0 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: justify;
        color: #151618b8;
        padding: 0 20px;
        line-height: 2.2;
        font-weight: 600;
      }
    }
  }

</style>